<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
	content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection"
	content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" href="${ctxPath}/static/assets/aui/css/aui.css" media="all">
<!-- jQuery Include -->
<script type="text/javascript" src="${ctxPath}/static/assets/scripts/jquery.min.js"></script>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="${ctxPath}/static/assets/css/amazeui.min.css">
<link rel="stylesheet" href="${ctxPath}/static/assets/css/app.css">
<script src="${ctxPath}/static/assets/scripts/amazeui.min.js"></script>
<script src="${ctxPath}/static/assets/scripts/app.js"></script>
<style>
.am-btn-block {
	line-height: 0.1em;
	padding-top: 20px;
}

.submit {
	border-radius: 30px;
	margin-top: 49px;
	background-color: #3bb4f2;
}

#J_getCode {
	position: absolute;
	display: block;
	line-height: 27px;
	right: 21px;
	top: 8px;
	height: 27px;
	width: 80px;
	font-size: 12px;
	border-radius: 30px;
}

#J_resetCode {
	position: absolute;
	display: block;
	line-height: 27px;
	right: 21px;
	top: 8px;
	height: 27px;
	width: 80px;
	font-size: 12px;
	border-radius: 30px;
}

* {
	top: 40px;
	margin: 0;
	padding: 0;
}

#tops-1 {
	top: -40px;
	position: absolute;
	display: none;
}

.aui-tips-title {
	top: 0;
	position: absolute;
	margin: 0 auto;
	text-align: center
}

.info {
	color: #60C4FD;
}

#readIndo {
	background-color: white;
	top: 28px;
}

#readIndo>.aui-tips-title {
	color: gray;
	font-size: 1.2rem;
}
</style>
</head>

<body>
	<div class="aui-tips aui-margin-b-15" id="tops-1">
		<div class="aui-tips-title">请输入手机号码</div>
	</div>
	<div class="am-g">
		<!-- LOGO -->
		<div class="am-u-sm-12 am-text-center">
			<img src="${ctxPath}/static/assets/images/logo.png" />
		</div>
		<!-- 登陆框 -->
		<div class="am-u-sm-11 am-u-sm-centered">
			<form class="am-form">
				<fieldset class="myapp-login-form am-form-set">
					<div class="am-form-group am-form-icon">
						<i class="am-icon-user"></i> <input id="phone" type="text" maxlength="11"
							class="myapp-login-input-text am-form-field"
							placeholder="请输入您的手机号">
					</div>
					<div class="am-form-group am-form-icon">
						<i class="am-icon-lock"></i> <input type="text" id="code" maxlength="4"
							class="myapp-login-input-text am-form-field" placeholder="请输入验证码">
						<div class="aui-btn aui-btn-primary" onclick="getCode(this)"
							id="J_getCode">获取验证码</div>
						<div class="aui-btn aui-btn-default" id="J_resetCode"
							style="display: none;">
							<span id="J_second">120</span>秒后重发
						</div>
					</div>
				</fieldset>
				<div class="aui-tips aui-margin-b-15" id="readIndo">
					<div class="aui-tips-title">
						登录即代表阅读并同意<span class='info'>用户协议</span>
					</div>
				</div>
				<a class='submit am-btn am-btn-primary am-btn-block'>登录</a> 
			</form>
		</div>
	</div>
</body>
<script type="text/javascript" src="${ctxPath}/static/assets/aui/script/aui-toast.js"></script>
<script type="text/javascript">
	function  getRequest(){
		var url = location.search; //获取url中"?"符后的字串
		var theRequest = new Object();
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			strs = str.split("&");
			for(var i = 0; i < strs.length; i ++) {
				theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); }

		}
		return theRequest;
	}
	var getRequest = getRequest();
	if (getRequest.code) {
		this.code = getRequest.code;
	} else {
		var pageUrl = window.location.href
				.replace(/[/]/g, "%2f")
				.replace(/[:]/g, "%3a")
				.replace(/[#]/g, "%23")
				.replace(/[&]/g, "%26")
				.replace(/[=]/g, "%3d");
		var url =
				"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
				"wx224e8b702efc0e2b" +
				"&redirect_uri=" +
				pageUrl + //这里放当前页面的地址
				"&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect";
		window.location.href = url;
	}
	//去登录
	$(".submit").click(function() {
		var  wxCode=getRequest.code;
		if (!wxCode) {
			showCheckInfo('未获取到微信code', 1000);
			return;
		}
		 var phone = $('#phone').val();
		if (phone == '') {
			$('#phone').focus();
			showCheckInfo('请输入手机号码', 1000);
			return;
		}
		var phone = checkPhone(); //验证手机号码
		if (!phone) {
			$('#phone').focus();
			showCheckInfo('请输入正确的手机号码', 1000);
			return;
		} 
		var code = $("#code").val();
		if (code == '') {
			$("#code").focus();
			showCheckInfo('请输入验证码', 1000);
			return;
		}
		login(phone, code,wxCode);
	})

	function login(phone, code,wxCode) {
		$.ajax({
			type : "POST",
			url :"${ctxPath}/wx/small/login",
			data :{
				phone:phone,
				code:code,
				userType: 0,
				wxCode:wxCode
			},
			dataType : "json",
			success : function(result) {
				if(result.status=="0000"){
					// sessionStorage.setItem("userInfo",JSON.stringify(result.data));//以“key”为名称存储一个值“value”
					localStorage.setItem("userInfo",JSON.stringify(result.data));
					location.href ="${ctxPath}/wechat/public/toMinePage";
					showCheckInfo("登录成功!", 1000);
				}else
					showCheckInfo(result.msg, 1000);
			},
			error:function(result){
			}
		});
	}

	//提交			
	function getMessage(phone) {
		$.ajax({
			type : "POST",
			url :"${ctxPath}/wx/small/getSmCode",
			data : {
				phone : phone
			},
			dataType : "json",
			success : function(data) {
				console.log(data);
			}
		});
	}

	/*获取验证码*/
	var isPhone = 1;
	function getCode(e) {
		var phone = checkPhone(); //验证手机号码
		if (isPhone) {
			resetCode(); //倒计时
			getMessage(phone);
		} else {
			$('#phone').focus();
		}
	}
	//验证手机号码
	function checkPhone() {
		var phone = $('#phone').val();
		var pattern = /^1[0-9]{10}$/;
		isPhone = 1;
		if (phone == '') {
			showCheckInfo('请输入手机号码', 1000);
			isPhone = 0;
			return;
		}
		if (!pattern.test(phone)) {
			showCheckInfo('请输入正确的手机号码', 1000);
			isPhone = 0;
			return;
		}
		return phone;
	}

	function showCheckInfo(contant, time) {
		$("#tops-1").show();
		//轮询关闭顶部
		setTimeout(function() {
			$("#tops-1").fadeOut(time);
		}, time)
		$("#tops-1>div").text(contant);
	}
	//倒计时
	function resetCode() {
		$('#J_getCode').hide();
		$('#J_second').html('120');
		$('#J_resetCode').show();
		var second = 120;
		var timer = null;
		timer = setInterval(function() {
			second -= 1;
			if (second > 0) {
				$('#J_second').html(second);
			} else {
				clearInterval(timer);
				$('#J_getCode').show();
				$('#J_resetCode').hide();
			}
		}, 1000);
	}
</script>

</html>